<template>
  <el-dialog
    title="规格选择"
    v-model="dialogVisible"
    width="80%"
    top="5vh"
  >
    <el-container style="height: 65vh">
      <el-aside
        width="220px"
        class="image-aside"
      >
        <div class="top">
          <div
            class="sku-list"
            :class="{ active: activeId == item.id }"
            v-for="(item, index) in tableData"
            :key="index"
            @click="handleChangeActiveId(item.id)"
          >
            {{ item.name }}
          </div>
        </div>

        <div class="bottom">
          <el-pagination
            background
            layout="prev, next"
            :total="total"
            :current-page="currentPage"
            :page-size="limit"
            @current-change="getData"
          />
        </div>
      </el-aside>
      <el-main>
        <el-checkbox-group v-model="form.list">
          <el-checkbox
            v-for="item in list"
            :key="item"
            :label="item"
            border
          >
            {{ item }}
          </el-checkbox>
        </el-checkbox-group>
      </el-main>
    </el-container>

    <template #footer>
      <span>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="submit"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref } from "vue";
import {
  // 获取规格列表数据
  getSkusList,
} from "~/api/skus.js";

import { useInitTable } from "~/composables/useCommon.js";

const { loading, currentPage, limit, total, tableData, getData } = useInitTable(
  {
    getList: getSkusList,
    onGetListSuccess: (res) => {
      tableData.value = res.list;
      total.value = res.totalCount;
      if (tableData.value.length > 0) {
        // 默认激活左边第一个数据
        handleChangeActiveId(tableData.value[0].id);
      }
    },
  },
);

const dialogVisible = ref(false);
// 记录当前选中的是哪一个
const activeId = ref(0);

const callbackFunction = ref(null);
//
const open = (callback = null) => {
  callbackFunction.value = callback;
  getData(1);
  dialogVisible.value = true;
};

// 被选中的值
const form = reactive({
  name: "",
  list: [],
});

// 右侧列表数据
const list = ref([]);
function handleChangeActiveId(id) {
  activeId.value = id;
  list.value = [];
  console.log("tableData:", tableData.value);
  let item = tableData.value.find((o) => o.id == id);
  if (item) {
    list.value = item.default.split(",");
    form.name = item.name;
  }
}
// 通过submit方法，把数据传给父组件
const submit = () => {
  if (typeof callbackFunction.value === "function") {
    callbackFunction.value(form);
  }
  dialogVisible.value = false;
};

defineExpose({
  open,
});
</script>

<style>
.image-aside {
  border-right: 1px solid #eee;
  position: relative;
}
.image-aside .top {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 50px;
  overflow-y: auto;
}

.image-aside .bottom {
  position: absolute;
  bottom: 0;
  height: 50px;
  left: 0;
  right: 0;
  @apply flex items-center justify-center;
}

:v-deep(.el-form-item) {
  margin-bottom: 18px !important;
}

.sku-list {
  border-bottom: 1px solid #f4f4f4;
  @apply p-3 text-sm text-gray-600 flex items-center cursor-pointer;
}

.sku-list:hover,
active {
  @apply bg-blue-50;
}
</style>
